﻿@using K9Nano.Admin.Weixin.Dto
@model WeixinMpBindModel
@{
    Layout = "_LayoutWeixin";
}
@section Styles{
    <style>
        body, html {
            font-size: 14px;
            background: #f2f2f2;
        }

        * {
            padding: 0;
            margin: 0;
        }

        .loginBox {
            position: relative;
        }

            .loginBox .title {
                height: 270px;
                width: 100%;
                background-image: url('/assets/img/weixin-login-bg.png');
                background-size: cover;
                color: #fff;
            }

                .loginBox .title .hello {
                    font-size: 30px;
                    padding: 60px 0 20px 40px;
                }

                .loginBox .title .wellcome {
                    font-size: 24px;
                    padding-left: 40px;
                }

        .loginInpts {
            background: #fff;
            width: 90%;
            position: absolute;
            top: 190px;
            left: 5%;
            right: 5%;
            border-radius: 3px;
            padding: 36px 0 40px 0;
        }

            .loginInpts .phoneNumber {
                margin: 0 0 10px 30px;
                width: 80%;
                margin-bottom: 20px;
            }

            .loginInpts .imgCode {
                margin: 0 0 10px 30px;
                width: 80%;
                margin-bottom: 20px;
                position: relative;
            }

                .loginInpts .imgCode .codeImg {
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    width: 100px;
                }

            .loginInpts .phoneCode {
                margin: 0 0 10px 30px;
                width: 80%;
                position: relative;
            }

                .loginInpts .phoneCode .codeBtn {
                    padding: 5px 10px;
                    background: #4959ff;
                    border-radius: 3px;
                    color: #fff;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    outline: none;
                    border: none;
                    width: 100px;
                }

            .loginInpts p {
                font-size: 16px;
                color: #333;
            }

            .loginInpts input {
                width: 100%;
                height: 34px;
                line-height: 34px;
                border: none;
                outline: none;
                margin-top: 10px;
                color: #000;
            }

        .loginBtn {
            display: block;
            width: 80%;
            margin: 0 auto;
            text-align: center;
            background: linear-gradient(86deg,#4a54ff, #707cff);
            font-size: 16px;
            color: #fff;
            height: 40px;
            line-height: 40px;
            border: none;
            border-radius: 20px;
            outline: none;
            margin-top: 40px;
        }
        .weui-toptips{
            display: block
        }

        [v-cloak] {
            display: none
        }

    </style>
}
<div class="loginBox">
    <div class="title">
        <p class="hello">您好，</p>
        <p class="wellcome">欢迎使用！</p>
    </div>
    <div class="loginInpts" id="login">
        <form method="post" onsubmit="return validate()">
            <input name="ClientId" hidden value="@Model.ClientId" />
            <input name="AppId" hidden value="@Model.AppId" />
            <input name="OpenId" hidden value="@Model.OpenId" />
            <input name="UnionId" hidden value="@Model.UnionId" />
            <input name="ReturnUrl" hidden value="@Model.ReturnUrl" />
            <input name="Profile" hidden value="@Model.Profile" />
            <input name="Sign" hidden value="@Model.Sign" />

            <div class="phoneNumber">
                <p>手机号</p>
                <input type="tel" id="phone" name="Phone" placeholder="请输入手机号" pattern="^1\d{10}$" required v-model="phone">
            </div>
            <div class="imgCode">
                <p>图形验证码</p>
                <input type="text" placeholder="请输入图形验证码" id="inputCaptcha" maxlength="4" required v-model="captchaCode">
                <img :src="captchaUrl'"class="codeImg" v-on:click="captchaUrl=captchaUrlBase+'&_r=Math.random()'" />

            </div>
            <div class="phoneCode">
                <p>短信验证码</p>
                <input type="number" class="form-control" id="code" name="Code" required v-model="code">
                <input name="MessageId" hidden id="messageId" v-model="messageId" />
                <button class="codeBtn" v-on:click="getCode" id="btnSend" type="button" :disabled="time!==0" v-cloak>{{ time == 0 ? '获取验证码':( time + ' s') }}</button>
            </div>
            <button class="loginBtn" type="submit">登录</button>
        </form>
        <div class="weui-toptips weui-toptips_warn" id="topTips" v-show="error !== ''" v-cloak>{{error}}</div>
    </div>
</div>
@section Scripts{
    <script>
        (function(doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function() {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);

        var login = new Vue({
            el: '#login',
            data: {
                phone: '',
                code: '',
                captchaCode: '',
                error: '',
                time: 0,
                timer: null,
                messageId: '',
                captchaUrl: '@ViewBag.SmsHost/verification/Captcha?id=@Model.CaptchaId&length=4',
                captchaUrlBase: '@ViewBag.SmsHost/verification/Captcha?id=@Model.CaptchaId&length=4'
            },
            methods: {
                showError: function(msg) {
                    this.error = msg;
                    var vm = this;
                    setTimeout(function() {
                            vm.error = '';
                        },
                        3000);
                },
                getCode: function(event) {
                    var vm = this;
                    if (vm.phone === '') {
                        vm.showError('请填写手机号');
                        return;
                    }
                    if (vm.captchaCode === '') {
                        vm.showError('请填写图形验证码');
                        return;
                    }
                    axios.post('@ViewBag.SmsHost/verification/Sms',
                            {
                                phone: vm.phone,
                                templateId: '@ViewBag.Sms.TemplateId',
                                expires: @ViewBag.Sms.Expires,
                                length: @ViewBag.Sms.Length,
                                captchaId: '@Model.CaptchaId',
                                captcha: this.captchaCode
                            })
                        .then(function(response) {
                            console.log(response);
                            if (response.data.code === 0) {
                                vm.messageId = response.data.result;
                                vm.time = 60;
                                vm.timer = setInterval(function() {
                                        if (vm.time > 0) {
                                            vm.time--;
                                        } else {
                                            clearInterval(vm.timer);
                                        }
                                    },
                                    1000);
                            } else {
                                vm.showError(response.data.message);
                            }
                        })
                        .catch(function(error) {
                            console.log(error);
                            vm.showError('获取验证码失败');
                        });
                }
            }
        });

        function validate() {
            var phone = $('#phone').val();
            if (phone === '') {
                login.showError('请填写手机号');
                return false;
            }
            var captcha = $('#inputCaptcha').val();
            if (captcha === '') {
                login.showError('请填写图形验证码');
                return false;
            }
            return true;
        }
    </script>
}